<template>
  <div class="login-wrap">
    <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-container">
      <h3 class="title">婚礼汇商家注册</h3>
      <el-form-item label="用户名" prop="businessName">
        <el-input v-model="registerForm.businessName" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="businessPassword">
        <el-input v-model="registerForm.businessPassword" placeholder="请输入密码" type="password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input v-model="registerForm.confirmPassword" placeholder="请再次输入密码" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="register">注册</el-button>
      </el-form-item>
    </el-form>
    <div class="register-tip">
      已经有账号了？
      <router-link to="/login">
        <el-link type="primary">立即登录</el-link>
      </router-link>
    </div>
  </div>
</template>

<script>
import Request from "../api/request";

export default {
  name: "Register",
  data() {
    return {
      registerForm: {
        businessName: "",
        businessPassword: "",
        confirmPassword: "",
      },
      registerRules: {
        businessName: [{required: true, message: "请输入用户名", trigger: "blur"},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}],
        businessPassword: [{required: true, message: "请输入密码", trigger: "blur"},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}],
        confirmPassword: [
          {required: true, message: "请再次输入密码", trigger: "blur"},
          {validator: this.validateConfirmPassword, trigger: "blur"},
        ],
      },
    };
  },
  methods: {
    register() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {

          Request.post("/business/register", this.registerForm).then((res) => {

            if (res.data.code == 200) {
              this.$message.success('注册成功');
              // 注册成功后跳转到登录页面
              this.$router.push({path: "/blogin"});
            } else
              this.$message.error("注册失败");
          });
        }
      })
    },
    validateConfirmPassword(rule, value, callback) {
      if (value !== this.registerForm.businessPassword) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    },
  },
};
</script>

<style scoped>

.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url();
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.register-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.register-tip {
  margin-top: 20px;
  text-align: center;
}
</style>
